<template>
  <div class="outer">
    <div id="lanrenzhijia">
      <a
        v-for="(item, i) in words"
        :key="item.name"
        href="#"
        :style="{
          transform: 'scale(' + (1 - i * 0.05 < 0.5 ? 0.5 : 1 - i * 0.05) + ')'
        }"
        :class="['bg' + (i % 6)]"
      >
        {{ item.name }} {{ item.value }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //   chartData: {
  //     type: Array,
  //     default: () => {
  //       return []
  //     }
  //   }
  // },
  data() {
    return {
      words: [
        {
          name: '1',
          value: 1
        },
        {
          name: '2',
          value: 2
        },
        {
          name: '3',
          value: 3
        },
        {
          name: '4',
          value: 4
        }
      ]
    }
  },
  // watch: {
  //   chartData: {
  //     handler(newVal){
  //       // console.log('newVal', newVal)
  //       const val = JSON.parse(JSON.stringify(newVal))
  //       this.words = val.sort((a, b)=>{
  //         return b.value - a.value
  //       })
  //       setTimeout(() => {
  //         this.initCloud()
  //       }, 0);
  //     },
  //     deep: true
  //   }
  // },
  mounted() {
    this.initCloud()
  },
  methods: {
    initCloud() {
      var radius = 70
      var dtr = Math.PI / 180
      var d = 250
      var mcList = []
      var active = false
      var lasta = 1
      var lastb = 1
      var distr = true
      var tspeed = 10
      var size = 250
      var mouseX = 0
      var mouseY = 0
      var howElliptical = 1
      var aA = null
      var oDiv = null
      var sa
      var ca
      var sb
      var cb
      var sc
      var cc
      var per

      var i = 0
      var oTag = null

      oDiv = document.getElementById('lanrenzhijia')

      aA = oDiv.getElementsByTagName('a')

      for (i = 0; i < aA.length; i++) {
        oTag = {}

        oTag.offsetWidth = aA[i].offsetWidth
        oTag.offsetHeight = aA[i].offsetHeight

        mcList.push(oTag)
      }

      sineCosine(0, 0, 0)

      positionAll()

      // oDiv.onmouseover=function ()
      // {
      //   active=true;
      // };

      // oDiv.onmouseout=function ()
      // {
      //   active=false;
      // };

      // oDiv.onmousemove=function (ev)
      // {
      //   var oEvent=window.event || ev;
      //   // console.log(oEvent.clientX)
      //   mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
      //   mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);

      //   mouseX/=5;
      //   mouseY/=5;
      // };

      setInterval(update, 30)

      function update() {
        var a
        var b

        if (active) {
          a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed
          b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed
        } else {
          a = lasta
          // a = lasta * 0.98;
          b = lastb
          // b = lastb * 0.98;
        }

        lasta = a
        lastb = b

        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
          return
        }

        var c = 0
        sineCosine(a, b, c)
        for (var j = 0; j < mcList.length; j++) {
          var rx1 = mcList[j].cx
          var ry1 = mcList[j].cy * ca + mcList[j].cz * -sa
          var rz1 = mcList[j].cy * sa + mcList[j].cz * ca

          var rx2 = rx1 * cb + rz1 * sb
          var ry2 = ry1
          var rz2 = rx1 * -sb + rz1 * cb

          var rx3 = rx2 * cc + ry2 * -sc
          var ry3 = rx2 * sc + ry2 * cc
          var rz3 = rz2

          mcList[j].cx = rx3
          mcList[j].cy = ry3
          mcList[j].cz = rz3

          per = d / (d + rz3)

          mcList[j].x = howElliptical * rx3 * per - howElliptical * 2
          mcList[j].y = ry3 * per
          mcList[j].scale = per
          mcList[j].alpha = per

          mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6)
        }

        doPosition()
        depthSort()
      }

      function depthSort() {
        var i = 0
        var aTmp = []

        for (i = 0; i < aA.length; i++) {
          aTmp.push(aA[i])
        }

        aTmp.sort(function (vItem1, vItem2) {
          if (vItem1.cz > vItem2.cz) {
            return -1
          } else if (vItem1.cz < vItem2.cz) {
            return 1
          } else {
            return 0
          }
        })

        for (i = 0; i < aTmp.length; i++) {
          aTmp[i].style.zIndex = i
        }
      }

      function positionAll() {
        var phi = 0
        var theta = 0
        var max = mcList.length
        var i = 0

        var aTmp = []
        var oFragment = document.createDocumentFragment()

        for (i = 0; i < aA.length; i++) {
          aTmp.push(aA[i])
        }

        aTmp.sort(function () {
          return Math.random() < 0.5 ? 1 : -1
        })

        for (i = 0; i < aTmp.length; i++) {
          oFragment.appendChild(aTmp[i])
        }

        oDiv.appendChild(oFragment)

        // eslint-disable-next-line no-redeclare
        for (var i = 1; i < max + 1; i++) {
          if (distr) {
            phi = Math.acos(-1 + (2 * i - 1) / max)
            theta = Math.sqrt(max * Math.PI) * phi
          } else {
            phi = Math.random() * Math.PI
            theta = Math.random() * (2 * Math.PI)
          }

          mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi)
          mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi)
          mcList[i - 1].cz = radius * Math.cos(phi)

          aA[i - 1].style.left =
            mcList[i - 1].cx +
            oDiv.offsetWidth / 2 -
            mcList[i - 1].offsetWidth / 2 +
            'px'
          aA[i - 1].style.top =
            mcList[i - 1].cy +
            oDiv.offsetHeight / 2 -
            mcList[i - 1].offsetHeight / 2 +
            'px'
        }
      }

      function doPosition() {
        var l = oDiv.offsetWidth / 2
        var t = oDiv.offsetHeight / 2
        for (var i = 0; i < mcList.length; i++) {
          aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'
          aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'

          aA[i].style.fontSize = (2 * mcList[i].scale) / 2 + 'em'

          aA[i].style.filter = 'alpha(opacity=' + 100 * mcList[i].alpha + ')'
          aA[i].style.opacity = mcList[i].alpha
        }
      }

      function sineCosine(a, b, c) {
        sa = Math.sin(a * dtr)
        ca = Math.cos(a * dtr)
        sb = Math.sin(b * dtr)
        cb = Math.cos(b * dtr)
        sc = Math.sin(c * dtr)
        cc = Math.cos(c * dtr)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.outer {
  position: relative;
  width: 100%;
  height: 220px;
}
#lanrenzhijia {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
}
#lanrenzhijia a {
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: Microsoft YaHei;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 20px;
  border-radius: 20px;
}
#lanrenzhijia .bg1 {
  background: linear-gradient(rgba(0, 176, 249, 1), rgba(0, 176, 249, 0.2));
}
#lanrenzhijia .bg2 {
  background: linear-gradient(rgba(223, 222, 31, 1), rgba(223, 222, 31, 0.2));
}
#lanrenzhijia .bg3 {
  background: linear-gradient(rgba(223, 118, 69, 1), rgba(223, 118, 69, 0.2));
}
#lanrenzhijia .bg4 {
  background: linear-gradient(rgba(0, 195, 26, 1), rgba(0, 195, 26, 0.2));
}
#lanrenzhijia .bg5 {
  background: linear-gradient(rgba(34, 215, 167, 1), rgba(34, 215, 167, 0.2));
}
#lanrenzhijia .bg0 {
  background: linear-gradient(rgba(19, 194, 194, 1), rgba(19, 194, 194, 0.2));
}
</style>
